<template>
    <div class="wrapper">
        <el-form label-width="100px" label-position="right" class="info_form" :model="ruleForm" :disabled="detailMode" :rules="rules"
            ref="ruleForm">
            <el-form-item label="客户类型" prop="type">
                公司客户
            </el-form-item>
            <el-form-item label="公司名称" prop="name">
                <el-input v-model="ruleForm.name"  placeholder="请输入签订合同的主体名称"></el-input>
            </el-form-item>
            <el-form-item label="营业执照" prop="business_license">
                <el-input v-model="ruleForm.business_license"  placeholder="请输入营业执照号码"></el-input>
            </el-form-item>
            <el-form-item label="负责人" prop="head">
                <el-input v-model="ruleForm.head"  placeholder="请输入负责人"></el-input>
            </el-form-item>
            <el-form-item label="联系方式" prop="head_mobile">
                <el-input v-model="ruleForm.head_mobile" placeholder="请输入联系方式"></el-input>
            </el-form-item>
            <el-form-item label="所在城市" prop="area">
                <el-cascader popper-class="col"  :options="areaData2" filterable clearable
                    v-model="ruleForm.area" placeholder="请选择您所在的城市" :props="{
                        value: 'id',
                        label: 'name',
                        children: 'next_level_data',
                    }" @change="handleChangeArea"></el-cascader>
            </el-form-item>
            <el-form-item label="关联母公司">
                <el-select remote v-model="ruleForm.parent_id" :remote-method="remoteMethod" filterable
                    placeholder="如有，请关联您的母公司" >
                    <el-option v-for="item2 in clientList" :key="item2.id" :label="item2.name" :value="item2.id">
                    </el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <div v-if="detailMode" style="margin-top: 40px; text-align: right;">
            <el-button type="primary" @click="handleEdit">编辑</el-button>
        </div>
        <div v-if="!detailMode" style="margin-top: 40px; text-align: right;">
            <el-button data-tracker="P65-6" @click="handleClose">取 消</el-button>
            <el-button data-tracker="P65-5" type="primary" @click="handleOk">确 定</el-button>
        </div>
    </div>
</template>

<script>
import { customerPeople } from "@/api/information";
import { regionList } from "@/page/material/common/common";
import {
    CustomerList,
    CustomerCreate,
    CustomerDetail,
    CustomerUpdate,
    CustomerDelete,
    getTransportsList,
    reqOrderFormData,
    getCustomerViewFreightAuthList,
    CustomerSubscription,
    reqWebsiteList,
    AdminBox,
} from "@/api/customer";
export default {
    name: 'companyCustomer',
    components: {},
    props: ['id', 'mode'],
    data() {
        return {
            ruleForm: {},
            clientList: [],
            areaData2: [], //二级地址库
            rules: {
                name: [
                    { required: true, message: "请填写公司名称", trigger: "blur" },
                ],
                head: [
                    { required: true, message: "请输入负责人", trigger: "blur" },
                ],
                head_mobile: [
                    { required: true, message: "请输入联系方式", trigger: "blur" },
                ],
                area: [
                    { required: true, message: "请选择所在城市", trigger: "" },
                ],
            },
        };
    },
    computed: {
        detailMode() {
            return this.mode === 'detail';
        }
    },
    mounted() {
        regionList(0).then((res) => {
            const data = res.data;
            data.forEach((item) => {
                item.next_level_data.forEach((iten) => {
                    iten.next_level_data = undefined;
                });
            });
            this.areaData2 = data;
        });
        CustomerDetail({ id: this.id }).then(res => {
            const data = res.data;
            data.parent_id = data.parent_id === 0 ? '' : data.parent_id;
            data.area = [data.province_id * 1, data.city_id * 1];
            data.business_license = data.business_license == '0' ? '' : data.business_license;
            this.ruleForm = data;
        });
    },
    methods: {
        handleChangeArea(val) {
            if (val.length > 0) {
                this.ruleForm.province_id = val[0] + '';
                this.ruleForm.city_id = val[1] + '';
            }
        },
        remoteMethod(val) {
            if (val !== '') {
                customerPeople({
                    name: val
                }).then((res) => {
                    this.clientList = res.data;
                });
            }

        },
        handleClose() {
            this.$emit('cancel');
            this.$emit('modeChange', 'detail');
        },
        handleEdit() {
            this.$emit('modeChange', 'edit');
        },
        handleOk() {
            this.$refs['ruleForm'].validate((valid) => {
                if (!valid) return;
                const params = {
                    ...this.ruleForm,
                    customer_type:'0',
                    parent_id: this.ruleForm.parent_id + '',
                    province_id: this.ruleForm.province_id * 1,
                    city_id: this.ruleForm.city_id * 1
                };
                CustomerUpdate(params).then(res => {
                    if (res.code === 10000) {
                        this.$emit('ok');
                    }
                });
            });
        }
    },
};
</script>
<style lang="scss" scoped>
.wrapper {
    width: 350px;
    .info_form{
        /deep/.el-form-item__content .el-input{
            width: 200px;
        }
    }
}
</style>




